<template>
	<view class="my-page">
		<view class="content-box">
			<view class="top-bg"></view>
			<view class="user-box">
				<image class="user-box-bg" src="@/static/images/user_info_bg.png"></image>

				<view class="no-login" v-if="!hasUserInfo" @tap="gotoLoginPage">
					<image src="@/static/images/default_head.png"></image>
					<view class="text-box">
						<view class="title">未登录</view>
						<view class="tip">请点击登录</view>
					</view>
				</view>
				<view class="login" v-else>
					<view class="user-info" @click="gotoSetup">
						<view class="left-box">
							<image :src="userInfo.avatar ? userInfo.avatar : '../../../static/images/default_head.png'"
								class="avatar"></image>
							<view class="text-box">
								<view class="name-box">
									<view class="username">{{userInfo.nickname ? userInfo.nickname: encryptionPhone(userInfo.telephone)}}
									</view>
									<view class="tag" v-if="userInfo.userType">
										<image v-if="userInfo.userType == '4'" src="@/static/images/jumin.png"
											class="jumin"></image>
										<image v-else src="@/static/images/wanggezhang.png" class="wanggezhang"></image>


										<view class="text" v-if="userInfo.userType == '1'">网格长</view>
										<view class="text" v-else-if="userInfo.userType == '2'">楼栋长</view>
										<view class="text" v-else-if="userInfo.userType == '3'">单元长</view>
										<view class="text" v-else>居民</view>
									</view>
								</view>
								<view class="verified-status">{{userInfo.verifiedStatus}}</view>
								<view class="verified-status">{{userInfo.floatName}}</view>
							</view>
						</view>

						<view class="right-box">
							<u-icon name="arrow-right" color="#ffffff" size="26"></u-icon>
						</view>

					</view>
					<view class="shijian-box" v-if="isLeader">
						<view class="shijian-item" @tap="gotoPage('/pages/my-sub/incident-list/incident-list')">
							<view class="title">待办事件</view>
							<view class="num">{{eventStatistics.notEndCount ? eventStatistics.notEndCount : 0}}</view>
						</view>
						<view class="shijian-item" @tap="gotoPage('/pages/my-sub/incident-list/incident-list?tab=4')">
							<view class="title">办结事件</view>
							<view class="num">{{eventStatistics.endCount ? eventStatistics.endCount : 0}}</view>
						</view>
						<view class="shijian-item">
							<view class="title">积分</view>
							<view class="num">0</view>
						</view>
					</view>
				</view>
			</view>
			<view class="features-box">
				<block v-for="(item,index) in featureList"
					v-if="hasUserInfo ? (isLeader ? isJumin == item.onlyJumin : isLeader == item.onlyLeader ) : item.isLogin" :key="index">
					<view class="features-item" @click="gotoGridPage(index)" hover-class="u-hover-class" :hover-stay-time="200">
						<u-icon :name="item.path" width="96rpx" height="96rpx" ></u-icon>
						<text class="features-text">{{item.title}}</text>
					</view>
				</block>
				
			</view>
			<!-- <view class="per-center" v-if="hasUserInfo">
				<image src="http://119.53.151.114:8888/storagegroup/M00/00/01/rBAKK2G8IeuAfO5IAAAaJhXw1zo502.png" mode=""></image>
				<view class="text">个人中心</view>
			</view> -->

		</view>
		<view class="about">
			<view class="title">小程序简介</view>
			<view class="content">{{aboutText}}</view>
		</view>
		<u-popup v-model="isShowVerified" @close="isShowVerified = false" mode="center"
			border-radius="20">
			<view class="verified-box">
				<image class="verified-bg" src="@/static/images/verified_bg.png"></image>
				<view class="verified-info">
					<view class="top-box">
						<view class="close" @click="isShowVerified = false">
							<u-icon name="close" color="#fff"></u-icon>
						</view>
						<image class="title-img" src="@/static/images/verified_title.png"></image>
						<view class="content">
							您可以进行实名认证，系统会自动匹配您的身份信息，如果信息匹配失败，请联系网格长维护居民信息。数据维护期间不会影响小程序的使用。给您带来的不便，敬请谅解！</view>
						<image class="zheng" src="@/static/images/zheng.png"></image>
					</view>
					<view class="bottom-box" @click="isShowVerified = false">进入小程序</view>
				</view>

			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: null,
				hasUserInfo: false,
				isShowVerified: false,
				isLeader: false, // 是不是三长
				isJumin: false,
				featureList: [{
						isLogin: false, // 未登录不可以看
						onlyLeader: true, // 只有三张可看
						onlyJumin: false, // 只有居民不可看
						title: "事件上报",
						path: "/static/images/shi.png"
					},
					{
						isLogin: true,
						onlyLeader: false,
						onlyJumin: false,
						title: "实名认证",
						path: "/static/images/shi2.png"
					},
					{
						isLogin: true,
						onlyLeader: false,
						onlyJumin: false,
						title: "意见反馈",
						path: "/static/images/yi.png"
					},
					{
						isLogin: true,
						onlyLeader: false,
						onlyJumin: false,
						title: "使用帮助",
						path: "/static/images/bang.png"
					},
					{
						isLogin: true,
						onlyLeader: false,
						onlyJumin: true,
						title: "关于",
						path: "/static/images/guan.png"
					}
				],
				eventStatistics: {}
			};
		},
		computed: {
			aboutText(){
				return this.$store.state.aboutText;
			}
		},
		methods: {
			gotoLoginPage() {
				console.log('登录')
				uni.navigateTo({
					url: '/pages/my-sub/login/login'
				})
			},
			gotoSetup() {
				if (!this.userInfo.userType) {
					this.isShowVerified = true;
					return false;
				}
				this.gotoPage(`/pages/my-sub/setup/setup?isLeader=${this.isLeader}`)
			},
			async gotoGridPage(index) {
				await this.gotoLogin()
				console.log("跳转页面", index)
				let page = ""
				if (index == 0) {
					page = `/pages/my-sub/incident-report/incident-report`
				} else if (index == 1) {
					if (this.userInfo.userType) {
						page = `/pages/my-sub/verified-detail/verified-detail`;
					} else {
						page = `/pages/my-sub/verified/verified`
					}

				} else if (index == 4) {
					page = `/pages/my-sub/about/about`
				} else {
					uni.showToast({
						title: '功能正在研发中, 敬请期待~',
						icon: 'none'
					})
					return false;
				}
				if (page) {
					uni.navigateTo({
						url: page
					})
				}

			},

			firstLogin(userInfo) {
				if (userInfo && userInfo.firstLogin == 1) {
					this.isShowVerified = true;
					userInfo.firstLogin = '2'
					this.$store.commit('setUserInfo', userInfo)
					uni.setStorageSync('userInfo', userInfo)
				}
			},
			getEventStatistics(){
				if(this.isLeader){
					uni.$u.http.post(`app/event/census`).then(res => {
						console.log("res", res)
						this.eventStatistics = res
					}).catch(err => {
						
					})
				}
				
				
			}
		},
		onLoad() {

		},
		async onShow() {
			console.log("获取用户信息", this.$store.getters.getUserInfo)
			let userInfo = this.$store.getters.getUserInfo;
			if (userInfo && userInfo.telephone) {
				this.userInfo = userInfo
				this.hasUserInfo = true;
				if (userInfo.userType) {
					let gridLeaderVo = userInfo.gridLeaderVo
					userInfo.verifiedStatus =
						`${gridLeaderVo.orgName}${gridLeaderVo.gridNumber ? gridLeaderVo.gridNumber+"网格" : ''}`
					if (userInfo.userType == '4') {
						userInfo.floatName =
							`${gridLeaderVo.estateName}${gridLeaderVo.buildNumber}(栋)${gridLeaderVo.unitNum}(单元)${gridLeaderVo.houseNum ? gridLeaderVo.houseNum+'(室)' : ''}`
						this.isLeader = false;
						this.isJumin = true;
					} else if(userInfo.userType == '2' || userInfo.userType == '3'){
						userInfo.floatName =
							`${gridLeaderVo.estateName}`
						this.isLeader = true;
						this.isJumin = false;
					} else {
						this.isLeader = true;
						this.isJumin = false;
					}
				
				} else {
					userInfo.verifiedStatus = '未认证'
					this.isLeader = false;
					this.isJumin = true;
				}
			} else {
				this.userInfo = null
				this.hasUserInfo = false
				this.isLeader = false;
				this.isJumin = false;
			}
			
			this.firstLogin(userInfo);
			this.getEventStatistics();
		},
	}
</script>

<style>
	page {
		background-color: #F5F5F5;
	}
</style>
<style lang="scss" scoped>
	
</style>
